/**
 * Created by Administrator on 2017\9\20 0020.
 * 预定详情
 */
import React from 'react';
import template from './../../commonui/template';
import { Link } from 'react-router-dom';
import {Button} from 'antd';
import PackageDetail from './PackgeDetail';
import UsrHeader from './UsrHeader';

class RrveDetail extends  React.Component{
    constructor(props){
        super(props);
        this.state={
            info:{
                Name:this.props.location.info.Name,
                Address:this.props.location.info.Address,
                Phone:this.props.location.info.Phone,
                WorkTime:this.props.location.info.WorkTime,
                Poster:this.props.location.info.Poster
            },
            show:'Package'
        }
        this.drawCtent=this.drawCtent.bind(this);
        this.ChangeCtnt=this.ChangeCtnt.bind(this);
    }
    ChangeCtnt(e){
        if(e.target.id!==this.state.show){
            this.setState({
                show:e.target.id
            })
        }
    }
    drawCtent(){
        if(this.state.show=='Package'){
            /********ajax请求套餐数据************/
            var data={
                info:{
                    Name:'Institution1',
                    Address:'Institution1',
                    Phone:'Institution1',
                    WorkTime:'Institution1',
                    Poster:'Institution1'
                },
                package:{
                    Name:'Package1',
                    Introduction:'Package1',
                    Content:'Package1',
                    Price:'Package1',
                    ResrveTime:'Package1'
                }
            }
            return (
                <div>
                    <PackageDetail info={data.info} package={data.package}/>
                </div>
            )
        }else{
             /********ajax请求机构信息************/
            return (
                <div>
                    <span>Institiution Info</span>
                </div>
            )
        }
    }
    render(){
        return (
            <div>
                <UsrHeader info={this.state} />
                <div>
                <div>
                    <img alt="poster1"/>
                    <img alt="poster2"/>
                    <img alt="poster3"/>
                    <img alt="poster4"/>
                </div>
                <div>
                    <h2>{this.state.info.Name}</h2>
                   <p>{this.state.info.Address}</p>
                    <p>{this.state.info.Phone}</p>
                    <p>{this.state.info.WorkTime}</p>
                </div>
                <div onClick={this.ChangeCtnt}>
                    <button id="Package">Package</button>
                    <button id="Info">More Info</button>
                </div>
                <div>
                   {this.drawCtent()}
                </div>

            </div>
            </div>
            )
    }
}

export default template({
    id: 'RrveDetail',
    component: RrveDetail
});